﻿@using Enter.Admin.Dtoes
@{
    ViewData["Title"] = "角色管理";
}
@section Styles {
    <link href="~/plugins/datatables.net-bs4/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
    <link href="~/plugins/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css" rel="stylesheet" />

    <link href="~/plugins/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css" rel="stylesheet" />

    <link href="~/plugins/dropzone/dist/min/dropzone.min.css" rel="stylesheet" />
    <link href="~/plugins/bootstrap-select/dist/css/bootstrap-select.min.css" rel="stylesheet" />
}
@section Scripts {
    <script src="~/plugins/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="~/plugins/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script>
    <script src="~/plugins/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
    <script src="~/plugins/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js"></script>
    <script src="~/plugins/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
    <script src="~/plugins/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js"></script>

    <script src="~/plugins/dropzone/dist/min/dropzone.min.js"></script>
    <script src="~/plugins/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
    <script src="~/plugins/sweetalert/dist/sweetalert.min.js"></script>
    <script>
        var searchObj = function () {
            return {}
        }
        var columns_str = '@(ViewData["columns"])'
        columns_str = columns_str.replace(/&quot;/g,"\"")
        var columns = JSON.parse(columns_str)
        columns.push({ data: "Id", title: "操作", orderable: false })

        var dataTable = null
        var handleDataTableDefault = function () {
            if ($('#data-table-default').length !== 0) {
                dataTable = $('#data-table-default').DataTable({
                    // https://blog.csdn.net/liuxiao723846/article/details/88553953
                    // https://datatables.net/reference/option/dom
                    dom: 'lBrtip',//'',// 'iCflrtp',//'Bfrtip',
                    // https://datatables.net/extensions/buttons/examples/initialisation/plugins
                    buttons: [
                        //'pageLength',
                        {
                            text: '新增 <i class="fa fa-plus"></i>',
                            className:'btn btn-primary',
                            action: function (e, dt, node, config) {
                                window.location.href = "@Url.Action("Edit", "Role")";
                            }
                        }
                    ],
                    "lengthMenu": [[10, 25, 50], [10, 25, 50]],
                    responsive: isMobile, //是否显示全部
                    "searching": false,//datatables自带的搜索
                    "processing": true,//加载中
                    "serverSide": true,
                    //"scrollX": true,
                    //"sScrollX": true,
                    "ajax": {
                        type: "POST",
                        url: '@Url.Action("Index", "Role")',
                        contentType: "application/json; charset=utf-8",
                        async: true,
                        data: function (data) {
                            data.Data = searchObj()
                            return JSON.stringify(data);
                        }
                    },
                    rowId: 'Id',
                    columns: columns,
                    "columnDefs": [
                        {
                            "targets": -1,//-1表示最后一行 也可以是数组，"visible": false,"searchable": false
                            "width": "250px",
                            render: function (data, type, full, meta) {
                                var html_c = '<a style="margin-left: 10px;" class="btn btn-sm btn-info" href="@Url.Action("Edit", "Role")/' + full.Id + '">修改 <i class="fa fa-edit"></i></a>';
                                if (!full.IsDefault) {
                                    html_c = html_c+ '<a style="margin-left: 10px;" class="btn btn-sm btn-info btn-delete" data-message="' + full.RoleName + '" data-id="' + full.Id + '">删除 <i class="fa fa-trash-alt"></i></a>';
                                }
                                return html_c;
                            }
                        }
                    ],
                    "language": datatable_language
                });
            }
        };

        var deleteRow = function (id, message) {
             // https://github.com/t4t5/sweetalert
            swal({
                title: '确定删除 "' + message+'" 吗?',
                text: '删除后不能恢复!',
                icon: 'warning',
                buttons: {
                    cancel: {
                        text: '取消',
                        value: null,
                        visible: true,
                        className: 'btn btn-default',
                        closeModal: true,
                    },
                    confirm: {
                        text: '删除',
                        value: true,
                        visible: true,
                        className: 'btn btn-warning',
                        closeModal: true
                    }
                }
            }).then(willDelete => {
                if (willDelete) {
                    $.ajax({
                        type: "POST",
                        dataType: "json",
                        url: "@Url.Action("Delete", "Role")" + "/" + id,// ,new {id = Model.Id }
                        data: $("#form-delete").serialize(),
                        success: function (result) {
                            if (result.Success) {
                                dataTable.ajax.reload();
                            } else {
                                show_alert('warning', result.Message)
                            }
                        },
                        error: function (e) {
                            show_alert('error', '网络异常.')
                        }
                    });
                }
            });
        };

        $(document).ready(function () {
            handleDataTableDefault();
            //$('.selectpicker').selectpicker('render');

            //$("#search-button").click(function () {
            //    if (dataTable != null) {
            //        dataTable.ajax.reload();
            //    }
            //});

            @*$("#add-button").click(function () {
               window.location.href = "@Url.Action("Edit", "Role")";
            });*@

            $("#data-table-default").on("click", ".btn-delete", function (e) {
                e.preventDefault();
                var id = $(this).attr("data-id");
                var message = $(this).attr("data-message");
                deleteRow(id, message)
            });
        });

    </script>
}

<!-- begin breadcrumb -->
<ol class="breadcrumb float-xl-right">
    <li class="breadcrumb-item"><a href="javascript:;">系统设置</a></li>
    <li class="breadcrumb-item active">角色管理</li>
</ol>
<!-- end breadcrumb -->
<!-- begin page-header -->
<h1 class="page-header">角色管理 <small>...</small></h1>
<!-- end page-header -->
<!-- begin panel -->
<div class="panel panel-inverse">
    <!-- begin panel-heading -->
    <div class="panel-heading">
        <h4 class="panel-title">角色列表</h4>
    </div>
    <!-- end panel-heading -->
    @*<div class="panel-body">
            <div class="row m-b-12">
                <div class="col-md-3">
                </div>
                <div class="col-md-3">
                </div>
                <div class="col-md-3">
                </div>
                <div class="col-md-3">
                    <button type="button" id="add-button" class="btn btn-primary m-r-5 m-b-5">新增</button>
                </div>
            </div>
        </div>*@
    <!-- begin panel-body -->
    <div class="panel-body">
        <form id="form-delete" style="display:none">@Html.AntiForgeryToken()</form>
        <table id="data-table-default" class="table table-striped table-bordered table-td-valign-middle display nowrap" style="width:100%">
        </table>
    </div>
    <!-- end panel-body   -->
</div>
<!-- end panel -->
